import 'package:flutter/material.dart';
import '../../model/post.dart';

class ViewWidget extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return GridViewBuilderDemo();
  }
}

// 按需生成 GridView 视图项目
class GridViewBuilderDemo extends StatelessWidget {

  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
      child: Image(
        image: AssetImage(posts[index].imageUrl),
        fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(8.0),
      itemCount: posts.length,
      itemBuilder: _gridItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 设置交叉抽上面的项目的数量
        mainAxisSpacing: 8.0,
        crossAxisSpacing: 8.0,
      ),
    );
  }
}

class GridViewExtentDemo extends StatelessWidget {

  // 动态生成网格视图
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (index) => 
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "item $index",
            style: TextStyle(
              fontSize: 18.0,
              color: Colors.grey,
            ),
          ),
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 150.0, // 设置网格主轴方向的最大尺寸
      crossAxisSpacing: 16.0, // 设置交叉轴的边距
      mainAxisSpacing: 16.0, // 设置主轴边距
      scrollDirection: Axis.vertical, // 设置网格视图的方向
      children: _buildTiles(100),
    );
  }
}

class GridViewCountDemo extends StatelessWidget {

  // 动态生成网格视图
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (index) => 
        Container(
          color: Colors.grey[300],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "item $index",
            style: TextStyle(
              fontSize: 18.0,
              color: Colors.grey,
            ),
          ),
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3, // 设置交叉轴个数
      crossAxisSpacing: 16.0, // 设置交叉轴的边距
      mainAxisSpacing: 16.0, // 设置主轴边距
      scrollDirection: Axis.vertical, // 设置网格视图的方向
      children: _buildTiles(100),
    );
  }
}

class PageVireBuilderDemo extends StatelessWidget {

  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: <Widget> [
        SizedBox.expand(
          child: Image(
            image: AssetImage(posts[index].imageUrl),
            fit: BoxFit.contain,
          ),
        ),
        Positioned(
          bottom: 32.0,
          left: 8.0, 
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                posts[index].title,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0
                ),
              ),
              Text(
                posts[index].author,
                style: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 16.0
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder, 
    );
  }
}

class PageViewDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return PageView(
      // pageSnapping: false, // 设置页面的滚动效果
      // reverse: true, // 设置页面的位置，按照 children 的顺序反向显示
      // scrollDirection: Axis.vertical, // 修改视图为垂直方向滚动
      onPageChanged: (currentPage) => debugPrint("Page: $currentPage"),
      controller: PageController( // 视图滚动页面控制属性
        initialPage: 1, // 设置初始显示的页面，默认为 0
        keepPage: false, // 默认会记住滚动的页面，设置为 false 不记录
         // viewportFraction: 0.85, // 设置视图占用的屏幕比例
      ),
      children: <Widget> [
        Container(
          color: Colors.brown[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "ONE",
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          color: Colors.grey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "TWO",
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          color: Colors.blueGrey[900],
          alignment: Alignment(0.0, 0.0),
          child: Text(
            "THREE",
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }
}